<ng-template #template>
  <div class="svc-flex-column">
    <ng-container *ngIf="model.isToolboxVisible">
      <ng-template [component]="{name: 'svc-toolbox', data: { model: creator }}"></ng-template>
    </ng-container>
  </div>
  <div class="svc-tab-designer" [class]="model.getRootCss()" (click)="model.clickDesigner()">
    <sv-scroll>
      <div class="svc-tab-designer_content">
        <ng-container *ngIf="model.showPlaceholder">
          <div *ngIf="creator.showHeaderInEmptySurvey && creator.showSurveyHeader" class="svc-designer-header">
            <div *ngIf="survey.renderedHasHeader" [class]="survey.css.header" [survey]="survey" sv-ng-survey-header>
            </div>
          </div>
          <div class="svc-designer__placeholder-container" [attr.data-sv-drop-target-survey-element]="'newGhostPage'">
            <svc-surface-placeholder [name]="'designer'" [placeholderTitleText]="model.placeholderTitleText"
              [placeholderDescriptionText]="model.placeholderDescriptionText">
            </svc-surface-placeholder>
            <svc-page-wrapper [page]="model.newPage" [creator]="creator" [isGhost]="true" [className]="'svc-designer-placeholder-page'"></svc-page-wrapper>
          </div>
        </ng-container>
        <ng-container *ngIf="!model.showPlaceholder">
          <svc-designer-survey [model]="model"></svc-designer-survey>
        </ng-container>
      </div>
    </sv-scroll>
  </div>
</ng-template>